<template>
    <div class="mark-container">
        <!-- <h2>数据管理</h2>
        <SCTabs v-model="currentPageName" type="border-card">
            <SCTabPane label="创建数据集" name="create" />
            <SCTabPane label="发布数据集" name="publish" />
            <SCTabPane label="数据标注" name="mark" />
        </SCTabs> -->
        <div class="mark-header">
            <SCInput
                placeholder="请输入关键字检索"
                v-model="keyInput"
                v-trim
                :prefix-icon="Search"
                class="search-input"
                @change="debounce(search)"
                clearable
            />
            <SCButton type="primary" :icon="Plus" @click="addMark"> 新建数据标注 </SCButton>
        </div>
        <div v-loading="taskLoading">
            <SCTable
                style="width: 100%"
                :data="taskDatasource"
                :stripe="false"
                :style="`width: 100%`"
            >
                <SCTableColumn prop="id" label="序号" :min-width="60">
                    <template #default="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </SCTableColumn>
                <SCTableColumn prop="name" label="标注任务名称" :min-width="300">
                    <template #default="scope">
                        <SCLink @click="toTaskDetail(scope.row)">{{ scope.row.name }}</SCLink>
                    </template>
                </SCTableColumn>
                <SCTableColumn prop="preMarkStatus" label="是否完成了预标注" :min-width="150">
                    <template #default="scope">
                        <SCSwitch
                            v-model="scope.row.preMarkStatus"
                            active-color="#A446CA"
                            inactive-color="rgba(0, 0, 0, 0.12)"
                            :active-value="1"
                            :inactive-value="2"
                            @change="changePreMarkStatus(scope.row)"
                            :disabled="scope.row.preMarkLoading"
                        />
                    </template>
                </SCTableColumn>
                <SCTableColumn prop="needMarkStatus" label="是否需要人工标注" :min-width="150">
                    <template #default="scope">
                        <SCSwitch
                            v-model="scope.row.needMarkStatus"
                            active-color="#A446CA"
                            inactive-color="rgba(0, 0, 0, 0.12)"
                            :active-value="1"
                            :inactive-value="2"
                            @change="changeNeedMarkStatus(scope.row)"
                            :disabled="scope.row.needMarkLoading"
                        />
                    </template>
                </SCTableColumn>
                <SCTableColumn label="操作" fixed="right" :min-width="248" :width="268">
                    <template #default="scope">
                        <div class="action-btn">
                            <Upload
                                class="upload-label-button"
                                type="success"
                                v-model="scope.row.labelFile"
                                :notDirectory="true"
                                :loading="scope.row.uploadLoading"
                                @change="uploadLabelFile(scope.row)"
                                ><svg-icon icon-class="cloud-upload" />标签文件</Upload
                            >
                            <SCButton @click="editMark(scope.row)" size="small" type="primary"
                                >编辑</SCButton
                            >
                            <SCButton
                                @click="deleteMark(scope.row)"
                                size="small"
                                type="danger"
                                :loading="scope.row.deleteLoading"
                                >删除</SCButton
                            >
                        </div>
                    </template>
                </SCTableColumn>
            </SCTable>
            <div class="pagination-container">
                <SCPagination
                    class="pagination"
                    v-model:current-page="pageQuery.currentPage"
                    v-model:page-size="pageQuery.pageSize"
                    :total="pageQuery.total"
                    :page-sizes="[10, 20, 50]"
                    layout="prev,pager,next,sizes,jumper"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </div>
        <MarkDialog
            :visible="dialogVisible"
            :data="selectedMarkItem"
            @refreshList="refreshList"
            @hideDialog="hideMarkDialog"
        />
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, nextTick, watch } from "vue";
import { useRouter } from "vue-router";
import { SCMessageBox, SCMessage } from "@sribd/sc-ui";
import { Plus, Search } from "@element-plus/icons-vue";
import { debounce } from "~/utils/common";
import MarkDialog from "./MarkDialog.vue";
import Upload from "~/components/Upload.vue";
import {
    getMarkTaskList,
    updateNeedMarkStatus,
    updatePreMarkStatus,
    deleteMarkTask,
    uploadLabelFileList,
} from "@/api/mark";

const router = useRouter();
const keyInput = ref("");
const currentPageName = ref("mark");
const taskLoading = ref(false);
const dialogVisible = ref(false);
const taskDatasource = ref([]);
const selectedMarkItem = ref(null);
const pageQuery = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0,
});
const editMark = (row: any) => {
    selectedMarkItem.value = row;
    dialogVisible.value = true;
};
const deleteMark = async (row: any) => {
    await SCMessageBox.confirm("项目删除后将不能恢复，确定要删除么？", "info", {
        title: "删除确认",
        type: "warning",
    });
    row.deleteLoading = true;
    try {
        await deleteMarkTask(row.id);
        search();
    } catch (e) {
        SCMessage({
            message: e.msg || "标注任务删除成功!",
            type: "error",
        });
    } finally {
        row.deleteLoading = false;
    }
};
const hideMarkDialog = () => {
    dialogVisible.value = false;
};
const addMark = () => {
    selectedMarkItem.value = null;
    dialogVisible.value = true;
};

const toTaskDetail = (row: any) => {
    router.push({
        name: "markTaskDetail",
        params: {
            id: row.dataSetId,
            name: row.name,
            parentId: 0,
        },
        query: {
            taskId: row.id,
        },
    });
};

const search = async () => {
    taskLoading.value = true;
    try {
        const name = keyInput.value;
        const { list, total } = await getMarkTaskList({
            name,
            page: pageQuery.currentPage,
            pageSize: pageQuery.pageSize,
        });
        taskDatasource.value = list;
        pageQuery.total = total;
    } catch (e) {
        SCMessage({
            message: e.msg || "获取标注任务列表失败！",
        });
    } finally {
        taskLoading.value = false;
    }
};
const handleSizeChange = () => {
    search();
};
const handleCurrentChange = () => {
    search();
};
const refreshList = () => {
    if (!selectedMarkItem.value) {
        // 新增
        pageQuery.currentPage = 1;
    }
    nextTick(() => {
        search();
    });
};
const changePreMarkStatus = async (row: any) => {
    const { id, preMarkStatus } = row;
    row.preMarkLoading = true;
    try {
        await updatePreMarkStatus({
            id,
            preMarkStatus,
        });
        search();
    } catch (e) {
        SCMessage({
            message: e.msg || "是否完成了预标注状态设置失败!",
            type: "error",
        });
    } finally {
        row.preMarkLoading = false;
    }
};
const changeNeedMarkStatus = async (row: any) => {
    const { id, needMarkStatus } = row;
    row.needMarkLoading = true;
    try {
        await updateNeedMarkStatus({
            id,
            needMarkStatus,
        });
    } catch (e) {
        SCMessage({
            message: e.msg || "是否需要人工标注状态设置失败!",
        });
    } finally {
        row.needMarkLoading = false;
    }
};
search(); // 页面一打开就请求列表数据

const uploadLabelFile = async (row: any) => {
    // 上传标签文件
    try {
        row.uploadLoading = true;
        const { id, labelFile } = row;
        row.labelFile = "";
        const res = await uploadLabelFileList(id, labelFile);
        SCMessage({
            type: "success",
            message: "标签文件上传成功!",
        });
        // search();
    } catch (e) {
        SCMessage({
            type: "error",
            message: e.msg || "标签文件上传失败!",
        });
    } finally {
        row.uploadLoading = false;
    }
};
</script>
<style lang="scss" scoped>
:deep(.search-input) {
    width: 280px;
}
.mark-header {
    display: flex;
    justify-content: space-between;
    margin: 20px 0 12px;
}
:deep(.el-tabs__header) {
    margin: 0;
}
:deep(.el-switch.is-disabled) {
    opacity: 1;
}
.mark-container h2 {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 500;
}

.pagination-container {
    overflow: hidden;
    margin-top: 10px;
    :deep(.pagination) {
        float: right;
    }
    :deep(.el-input__wrapper) {
        padding: 1px 8px;
    }
}

.action-btn {
    display: flex;
    :deep(.upload-label-button) {
        margin-right: 10px;
    }
}
.svg-icon {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    fill: currentColor;
    overflow: hidden;
}
</style>
